<template>
	<view>
		
		<image @click="back" src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/back%402x.png" mode="" class="back" :style="{top:BarTop + 'px'}"></image>
			
		<view class="maxbox" :style="{marginTop:BarTop + BarHeight + 20+'rpx'}">
			<view style="width: 100%;height: 1px;"></view>
			<view class="maxbox-top">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/fore%402x.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
				<view class="maxbox-top-sp">
					待支付
				</view>
			</view>
			<view class="maxbox-top-title">
				支付后等待发货
			</view>
		</view>
		<view class="top">
			<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203451%402x.png" mode="" class="icon"></image>
			<view class="address">
				{{data.address.address}}
			</view>
			<view class="namebox">
				<view class="name">{{data.address.name}}</view>
				<view class="phone">{{data.address.mobile}}</view>
			</view>
			<!-- <view class="top-btn" @click="changeaddress">
				修改
			</view> -->
		</view>
		<view class="main1">
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="main-store">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Frame%402x.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
				<view class="store-name">
					{{data.shop_id?data.shop_id:'云仓优送'}}
				</view>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/right.png" mode="" style="width: 9rpx;height: 17rpx;margin-left: 10rpx;"></image>
			</view>
			
			<view class="store-main" @click="GotoGoodInfo(data)">
				<image :src="data.goods[0].image" mode="" style="width: 144rpx;height: 144rpx;"></image>
				<view class="store-right">
					<view class="right-top">
						{{data.goods[0].title}}
					</view>
					<view class="right-center">
						{{data.goods[0].difference}}
					</view>
					<view class="right-money">
						<text style="font-size: 28rpx;">券</text>{{data.goods[0].price}}
					</view>
					<view class="right-num">
						<view class="num-sp">
							× {{data.goods[0].number}}
						</view>
					</view>
				</view>
			</view>
		
		</view>
		
		<view class="moneyInfo">
			<view class="InfoTitle">
				<view class="Infoname">
					商品金额
				</view>
				<view class="InfoMoney">
					<text style="font-size: 28rpx;">券</text>{{data.pay.price}}
				</view>
			</view>
			
			<view class="InfoTitle" style="margin-top: 20rpx;">
				<view class="Infoname">
					运费<text style="font-size: 24rpx;color: #999999;">运费(快递)</text>
				</view>
				<view class="InfoMoney">
					<text style="font-size: 24rpx;">￥</text>0
				</view>
			</view>
			
		
			
			<view class="InfoTitle" style="margin-top: 20rpx;" @click="show = true">
				<view class="Infoname">
					<image 
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group1999%402x.png" 
					mode="" 
					style="width: 30rpx;height: 24rpx;margin-right: 5rpx;"></image>
					优惠权益
				</view>
				<view class="InfoMoney">
					<text style="font-size: 28rpx;color: #FD5F48;" >什么是购物券和支付金?</text>
					<image 
					src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Vector%20477%402x.png" 
					mode=""
					style="width: 12rpx;height: 19rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
			<view class="span">
				<view class="span1">
					<view class="span1-1">
						支付可获得支付金
					</view>
					<view class="span1-2">
						￥{{data.zfj}}
					</view>
				</view>
			</view>
			
			<view class="sfmoney">
				<text style="font-size: 24rpx;color: black;">实付</text><text style="font-size: 20rpx;">￥</text>{{data.pay.actual_payment}}
			</view>
		</view>
		
		<view class="Pay">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="number">
				<view class="numtitle">
					订单编号
				</view>
				<view class="num">
					{{data.order_no}}
				</view>
				<view class="numcopy" @click="COPY(data.order_no)">
					复制
				</view>
			</view>
			<view class="number">
				<view class="numtitle">
					下单时间
				</view>
				<view class="num" style="width:505rpx ;">
					{{data.createtime_text}}
				</view>
				
			</view>
		</view>
		
		<view class="footer">
			<view class="bottom-center">
				<view class="bottom-left">
					订单备注
				</view>
				<input type="text" disabled class="bottom-right" v-model="data.remarks"/>
			</view>
		</view>
		<view style="width: 100%;height: 116rpx;"></view>
		<view class="Btn">
			<!-- <view class="Btntitle">
				总计:
			</view>
			<view class="Btntitle1">
				<text style="font-size: 24rpx;">￥</text>{{data.pay.actual_payment}}
			</view> -->
			<view style="width: 218rpx;"></view>
			<view class="Btntitle3" @click="cancel">
				取消订单
			</view>
			<view class="Btntitle2 " @click="Paywx">
				立即支付
			</view>
		</view>
		
		
		
		
		<u-popup v-model="show" mode="bottom" height='700rpx' border-radius="29">
			<view class="botmodal">
				<!-- <image src="" mode="" style="width: 100%;height: 100%;"></image> -->
				<view style="width: 100%;height: 1rpx;"></view>
				<view class="modaltitle">
					什么是<text style="color: #F71828;">购物券</text>和<text style="color: #F71828;">支付金</text>
				</view>
				<view class="boxmoadl">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="boxtitle">
						购物券的产生:
					</view>
					<view class="boxconter">
						在云仓优送联盟的实体商家处消费即产生购物券，按照商家让利比X2=券额
					</view>
				</view>
				
				<view class="boxmoadl">
					<view style="width: 100%;height: 1rpx;"></view>
					<view class="boxtitle">
						支付金的产生:
					</view>
					<view class="boxconter">
						在云仓优送线上商城购物即产生支付金，按照50%赠送支付金
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number:1,
				manner:2,
				show: false,
				price:'',
				data:'',
				Quan:'',
				QuanData:'',
				show1:false,
				QuanNum:[],
				Quanflag:false,
				addData:'',
				BarTop:'',
				BarHeight:'',
				order_id:'',
			}
		},
		 computed: {
		    totalPrice() {
		      return this.QuanNum.reduce((accumulator, currentItem) => accumulator + (currentItem.money-0), 0);
		    },
			    finalAmount() {
			      const originalAmount = this.number * this.price;
				   const preciseFinalAmount = parseFloat((originalAmount - this.totalPrice).toFixed(2));
				    return preciseFinalAmount;
			    },
		  },
		  onShow() {
			  this.$u.api.shop.getOrderInfo({id:this.order_id}).then(res =>{
			  	if(res.code == 1){
			  		this.data = res.data
			  	}
			  })
		  },
		onLoad(option) {
			const systemInfo = uni.getSystemInfoSync();
				this.BarTop = systemInfo.statusBarHeight;
				this.BarHeight = 44; // 安卓默认导航高度
			this.order_id = option.order_id
			this.$u.api.shop.getOrderInfo({id:option.order_id}).then(res =>{
				if(res.code == 1){
					this.data = res.data
				}
			})
		
			
		},
		methods:{
			GotoGoodInfo(item){
				uni.navigateTo({
					url:`./product?id=${item.goods[0].goods_id}`
				})
			},

			cancel(){
				uni.showModal({
					title: '提示',
					content: '确定取消？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$u.api.shop.cancelOrder({id:this.data.id}).then(res =>{
							if(res.code == 1){
								uni.showToast({
								    title: '取消成功！',
								    icon: 'success'
								})
								setTimeout(()=>{
									uni.navigateBack({
									    delta: 1,
									})
								},1500)
							}else{
								uni.showToast({
								    title: res.msg,
								    icon: 'error'
								})
								setTimeout(()=>{
									uni.navigateBack({
									    delta: 1,
									})
								},1500)
							}
						}).catch(req =>{
							uni.showToast({
							    title: '取消失败！',
							    icon: 'error'
							})
							setTimeout(()=>{
								uni.navigateBack({
								    delta: 1,
								})
							},1500)
						})
					} else {  
						}  
					} 
				})
			
			},
			Paywx(){
				let that = this
				if((this.data.pay.actual_payment-0.01)>=0){
					this.$u.api.shop.WXPay({order_id:this.order_id}).then(req =>{
						if(req.code == 1){
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: req.data.timeStamp,
								nonceStr: req.data.nonceStr,
								package: req.data.package,
								signType: req.data.signType,
								paySign: req.data.paySign,
								success: function(ress) {
									uni.redirectTo({
										url:`./Paysuccess?id=${that.data.id}`
									})
								},
								fail: function(err) {
														
								}
							});
						}else{
							uni.showToast({
							    title: req.msg,
							    icon: 'error'
							});
						}
					
					})
				}else{
					this.$u.api.shop.WXPay({order_id:this.order_id}).then(req =>{
						if(req.code == 1){
							uni.redirectTo({
								url:`./Paysuccess?id=${this.data.id}`
							})
						}else{
							uni.showToast({
							    title: req.msg,
							    icon: 'error'
							});
						}
					
					})
					
				}
			
			},
			COPY(value){
				uni.setClipboardData({
				 	    data: value,
				    	success: function () {
				    	//调用方法成功
				       uni.showToast({
				                   title: '复制成功',
				                   icon: 'success'
				                 });
						}
				})
			},
			Use(){
				this.Quanflag = true
				this.show1 = false
			},
			back(){
				uni.navigateBack({
				   
				})
			},
			changeaddress(){
				uni.navigateTo({
					url:`../../pageA/address/index?she=${true}&order_id=${this.data.id}&page=${0}`
					
				})
			},
			valChange(e) {
			},
			change(index){
				this.manner = index
			}
		}
	}
</script>

<style>
	.maxbox{
		width: 100%;
		height: 150rpx;
		/* position: relative; */
		
	}
	.maxbox-top{
		width: 720rpx;
		height: 64rpx;
		margin-left: 24rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.maxbox-top-sp{
		height: 46rpx;
		font-size: 48rpx;
		color: black;
		font-weight: bold;
		margin-left: 6rpx;
		line-height: 46rpx;
	}
	.maxbox-top-title{
		width: 720rpx;
		margin-left: 24rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}
	.top{
		width: 692rpx;
		height: 172rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shop/Group%203388%402x.png') center/cover;
		position: relative;
	}
	.address{
		width: 450rpx;
		height: 72rpx;
		position: absolute;
		top: 28rpx;
		left: 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold;
		color: black;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.icon{
		position: absolute;
		top: 33rpx;
		left: 26rpx;
		width: 28rpx;
		height: 28rpx;
	}
	.back{
		width: 60rpx;
		height: 60rpx;
		position: relative;
		left: 24rpx;
	}
	.namebox{
		width: 500rpx;
		height: 24rpx;
		position: absolute;
		display: flex;
		left: 66rpx;
		bottom: 30rpx;
	}
	.name{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: PingFang SC-Medium;
	}
	.phone{
		height: 24rpx;
		/* background-color: yellow; */
		line-height: 24rpx;
		font-size: 28rpx;
		color: #444444;
		font-family: D-DIN Exp-Regular;
		margin-left: 10rpx;
	}
	.top-btn{
		width: 108rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 2rpx #CDCDCD solid;
		text-align: center;
		line-height: 60rpx;
		position: absolute;
		top: 28rpx;
		right: 30rpx;
		font-size: 24rpx;
		color: #2D2D2D;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
	}
	.main1{
		width: 690rpx;
		height: 330rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.main-store{
		width: 662rpx;
		height: 26rpx;
		margin-left: 28rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
	}
	.store-name{
		min-width: 140rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.store-main{
		width: 630rpx;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-top: 58rpx;
	}
	.store-right{
		width: 474rpx;
		height: 144rpx;
		position: relative;
		/* background-color: skyblue; */
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: black;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.right-center{
		width: 100%;
		height: 20rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #888888;
		margin-top: 20rpx;
	}
	.right-money{
		min-width: 130rpx;
		height: 28rpx;
		font-size: 36rpx;
		color: #192524;
		position: absolute;
		bottom: 5rpx;
		line-height: 28rpx;
	}
	.right-num{
		width: 170rpx;
		height: 44rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}
	.num-sp{
		width: 170rpx;
		height: 44rpx;
		text-align: center;
		line-height: 50rpx;
		color: #888888;
		font-size: 24rpx;
	}
	.main-bot{
		width: 630rpx;
		height: 64rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background-color: #FAFAFA;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}
	.car{
		width: 26rpx;
		height: 26rpx;
		margin-left: 14rpx;
	}
	.bot-time{
		width: 222rpx;
		height: 22rpx;
		line-height: 22rpx;
		font-size: 24rpx;
		color: #909090;
		margin-right: 30rpx;
	}
	.bot-title{
		width: 330rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 22rpx;
		color: #303030;
		margin-left: 8rpx;
	}
	.moneyInfo{
		width: 690rpx;
		height: 420rpx;
		margin-left: 30rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;
		background-color: white;
		padding: 30rpx;
	}
	.sfmoney{
		width: 100%;
		height: 24rpx;
		margin-top: 44rpx;
		color: #FF4D00;
		font-size: 36rpx;
		text-align: right;
		line-height: 24rpx;
	}
	.InfoTitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Infoname{
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
	}
	.InfoMoney{
		font-size: 32rpx;
		color: #192524;
	}
	.span{
		width: 630rpx;
		height: 80rpx;
		background-color: #F6F6F6;
		border-radius: 16rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.span1{
		width: 570rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #222222;
		/* margin-top: 24rpx; */
	}
	.Pay{
		width: 690rpx;
		height: 170rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
	}
	.wxpay{
		width: 630rpx;
		margin-left: 30rpx;
		height: 46rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.wxpay1{
		width: 46rpx;
		height: 46rpx;
	}
	.pay-title{
		width: 546rpx;
		margin-left: 8rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.wxpay2{
		width: 36rpx;
		height: 36rpx;
	}
	.footer{
		width: 690rpx;
		height: 120rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}
	.bottom-center{
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.bottom-left{
		width: 372rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #192524;
		font-weight: bold;
		line-height: 24rpx;
	}
	.bottom-right{
		display: inline-block;
		width:258rpx;
		height: 24rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #CCCCCC;
	}
	.Btn{
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	.Btntitle{
		font-size: 24rpx;
		color: #192524;
		width: 72rpx;
		height: 36rpx;
		line-height: 36rpx;
		margin-left: 30rpx;
	}
	.Btntitle1{
		font-size: 48rpx;
		color:#FF4D00;
		width: 328rpx;
		height: 36rpx;
		line-height: 36rpx;
		/* margin-left: 30rpx; */
	}
	.Btntitle2{
		font-size: 28rpx;
		color:white;
		width: 290rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		background-color: #36BE6A;
		border-radius: 44rpx;
		margin-left: 28rpx;
		margin-right: 30rpx;
	}
	.Btntitle3{
		font-size: 28rpx;
		color:black;
		width: 184rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		background-color: #EAEAEA;
		border-radius: 44rpx;
	}
	.botmodal{
		width: 100%;
		height: 100%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203482%402x.png') center/cover;
	}
	.modaltitle{
		font-size: 36rpx;
		color: #710D0D;
		font-weight: bold;
		margin-top: 90rpx;
		margin-left: 30rpx;
	}
	.boxmoadl{
		width: 690rpx;
		height: 174rpx;
		margin-top: 48rpx;
		margin-left: 30rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Rectangle%20948%402x.png') center/cover;
	}
	.boxtitle{
		width: 224rpx;
		height: 37rpx;
		margin-top: 26rpx;
		margin-left: 82rpx;
		font-size: 32rpx;
		color: #2C2C2C;
		font-weight: bold;
		position: relative;
	}
	.boxtitle::before{
		content: '';
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: -2rpx;
		left: -58rpx;
		border-radius: 50%;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/Group%203477%402x.png') center/cover;
	}
	.boxconter{
		width: 576rpx;
		height: 72rpx;
		margin-top: 20rpx;
		margin-left: 82rpx;
		font-size: 24rpx;
		color: #3D3F41;
	}
	.Quanpp{
		width: 100%;
		min-height:700rpx;
		background-color: #F3F3F3;
	}
	.Quantitle{
		width: 100%;
		height: 28rpx;
		font-size: 32rpx;
		color: #101010;
		font-weight: bold;
		margin-top: 47rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.Quantitle1{
		min-width: 410rpx;
		height: 22rpx;
		margin-top: 38rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.GoPayQuan{
		width: 100%;height: 136rpx;
		position: fixed;
		bottom: 0;
	}
	.GoPayQuan1{
		width: 690rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 24rpx;
		border-radius: 44rpx;
		background-color: #36BE6A;
		color: white;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}
	.main {
		width: 694rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Subtract.png') center/cover;
		margin-left: 28rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;
		position: relative;
	}
	
	.main-left {
		position: relative;
		width: 190rpx;
		height: 194rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group%202759.png') center/cover;
		background-color: rgba(54, 190, 106, 0.95);
		border-radius: 16rpx;
	}
	
	.qiu1 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.qiu2 {
		width: 24rpx;
		height: 24rpx;
		background-color: #efefef;
		border-radius: 50%;
		position: absolute;
		bottom: -10rpx;
		left: 180rpx;
		z-index: 10;
	}
	
	.tx {
		width: 100%;
		height: 56rpx;
		position: absolute;
		top: 48rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 72rpx;
		color: white;
	}
	
	.tx1 {
		width: 100%;
		height: 18rpx;
		position: absolute;
		bottom: 48rpx;
		text-align: center;
		line-height: 18rpx;
		font-size: 20rpx;
		color: white;
	}
	
	.main-title {
		width: 160rpx;
		height: 32rpx;
		position: absolute;
		top: 28rpx;
		left: 214rpx;
		font-size: 32rpx;
		color: rgba(54, 57, 65, 1);
		font-weight: bold;
	}
	
	.main-time {
		width: 222rpx;
		height: 20rpx;
		position: absolute;
		top: 86rpx;
		left: 214rpx;
		font-size: 24rpx;
		color: rgba(122, 122, 122, 1);
	}
	
	.main-bottom {
		width: 96rpx;
		height: 22rpx;
		position: absolute;
		left: 214rpx;
		bottom: 30rpx;
		font-size: 24rpx;
		color: rgba(161, 161, 161, 1);
	}
	.number{
		width: 630rpx;
		height: 40rpx;
		margin-top: 29rpx;
		display: flex;
		margin-left: 30rpx;
		align-items: center;
	}
	.numtitle{
		width: 112rpx;
		height: 24rpx;
		font-size:28rpx;
		color: black;
		line-height: 24rpx;
		
	}
	.num{
		width: 425rpx;
		height: 24rpx;
		text-align: right;
		font-size:28rpx;
		line-height: 24rpx;
		color: #999999;
	}
	.numcopy{
		width: 80rpx;
		height: 40rpx;
		border-radius: 72rpx;
		background-color: #EFEFEF;
		font-size: 24rpx;
		color: black;
		text-align: center;
		line-height: 40rpx;
		margin-left: 5rpx;
	}
	.main-img {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		bottom: 25rpx;
		left: 320rpx;
	}
	
	.main-btn {
		
		position: absolute;
		top: 68rpx;
		right: 40rpx;
	}
</style>